<template>
  <div class="oneAccountPage">
    <div class="oneAccountPage_title">
      <div class="oneAccountPage_title_left">
        <div style="display:flex; padding: 10px 5px;">
          <div style="flex:1;">
            <div style="text-align: center;font-size:16px;font-weight:bolder;color:black;margin-bottom:10px">省跑道参与情况图</div>
            <div style="height:calc(18vh);width:100%">
              <VEcharts
                autoresize
                :options="leftConfig"
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
          <div style="flex:1.4">
            <div style="text-align: center;font-size:16px;font-weight:bolder;color:black;margin-bottom:10px">应用来源情况图</div>
            <div style="height:calc(18vh);width:100%">
              <VEcharts
                autoresize
                :options="rightConfig"
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="oneAccountPage_title_right">
        <div style="display:flex; padding: 10px 5px;">
          <div style="flex:1;">
            <div style="text-align: center;font-size:16px;font-weight:bolder;color:black;margin-bottom:10px">项目情况阶段图</div>
            <div style="height:calc(18vh);width:100%">
              <VEcharts
                autoresize
                :options="rightConfig1"
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
          <div style="flex:1">
            <div style="text-align: center;font-size:16px;font-weight:bolder;color:black;margin-bottom:10px">项目情况进度表</div>
            <div style="height:calc(18vh);width:100%">
              <VEcharts
                autoresize
                :options="rightConfig2"
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="oneAccountPage_body">
      <div class="oneAccountPage_body_search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="场景名称">
            <el-input v-model="formInline.user" placeholder="场景名称" />
          </el-form-item>
          <el-form-item label="归口领域">
            <el-select v-model="formInline.region" placeholder="归口领域">
              <el-option label="诸暨市" value="shanghai" />
              <el-option label="市委人才办" value="beijing" />
              <el-option label="越城区" value="beijing1" />
            </el-select>
          </el-form-item>
          <el-form-item label="项目阶段">
            <el-select v-model="formInline.region" placeholder="项目阶段">
              <el-option label="申报" value="shanghai" />
              <el-option label="完成" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">搜索</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="oneAccountPage_body_table">
        <vxe-table
          border
          stripe
          resizable
          highlight-hover-row
          height="380"
          :loading="loading"
          :checkbox-config="{labelField: 'id', highlight: true, range: true}"
          :data="tableData"
        >
          <vxe-table-column type="seq" width="40" />
          <vxe-table-column field="name" min-width="200" title="场景名称" show-overflow />
          <vxe-table-column field="sex" min-width="150" title="归属省级重大应用" show-overflow />
          <vxe-table-column field="age" title="归口领域" min-width="80" show-overflow />
          <vxe-table-column min-width="90" field="address" title="实施责任主体" show-overflow />
          <vxe-table-column min-width="80" field="address1" title="首席数据官" show-overflow />
          <vxe-table-column min-width="60" field="address2" title="项目阶段" show-overflow />
          <vxe-table-column min-width="60" field="address3" title="项目进度" show-overflow />
          <vxe-table-column min-width="110" field="address4" title="应用来源" show-overflow />
          <vxe-table-column
            fixed="right"
            min-width="80"
            title="操作"
          >
            <template #default="{ row }">
              <span style="cursor:pointer" @click="sc(row)">
                <i
                  :style="{ color: row.isSc?'orange':'' }"
                  class=" el-icon-star-off"
                />
                <span
                  :style="{ color: row.isSc?'orange':'' }"
                >收藏</span>
              </span>

            </template>
          </vxe-table-column>

        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script>
import VEcharts from '@/components/vecharts';
import * as echarts from 'echarts';
export default {
  components: {
    VEcharts
  },
  data() {
    return {
      loading: false,
      tableData: [
        { name: '绍兴市基层公权力监管平台2.0', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '申报', address3: '超前',
          address4: '全省多跨平台', address5: '' },
        { name: '人才管家应用场景', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '申报', address3: '超前',
          address4: '全省多跨平台', address5: '' },
        { name: '绍兴市基层公权力监管平台2.0', sex: '浙里畅通人才循环应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '申报', address3: '超前',
          address4: '全省多跨平台', address5: '' },
        { name: '智汇民情中枢应用场景', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '申报', address3: '超前',
          address4: '全省多跨平台', address5: '' },
        { name: '绍兴市基层公权力监管平台2.0', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '申报', address3: '超前',
          address4: '全省多跨平台', address5: '' },
        { name: '绍兴市基层公权力监管平台2.0', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '申报', address3: '超前',
          address4: '全省多跨平台', address5: '' },
        { name: '绍兴市基层公权力监管平台2.0', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '申报', address3: '超前',
          address4: '全省多跨平台', address5: '' },
        { name: '绍兴市基层公权力监管平台2.0', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '申报', address3: '超前',
          address4: '全省多跨平台', address5: '' },
        { name: '绍兴市基层公权力监管平台2.0', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '申报', address3: '超前',
          address4: '全省多跨平台', address5: '' }

      ],
      formInline: {
        user: '',
        region: ''
      },
      leftConfig: {
        legend: {
          orient: 'vertical',
          left: 'left',
          padding: [0, 0, 40, 0],
          textStyle: { // 图例文字的样式
            color: 'black',
            fontSize: 10
          }

        },
        color: ['#91cc76', '#ef6666'],
        grid: {
          bottom: '-5%',
          top: '10%'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '65%',
            data: [
              { value: 200, name: '已上跑道200个' },
              { value: 300, name: '未上跑道300个' }

            ],
            label: { // 饼图图形上的文本标签
              normal: {
                show: true,
                position: 'inner', // 标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 12 // 文字的字体大小
                },
                formatter: '{d}%'

              }
            },

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      rightConfig: {

        grid: {
          top: '0%',
          left: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          splitLine: {
            show: false
          },
          type: 'value',
          show: false
        }],
        yAxis: [{
          splitLine: {
            show: false
          },
          axisLine: { // y轴
            show: false
          },
          type: 'category',
          axisTick: {
            show: false
          },
          inverse: true,
          data: ['全省多跨景三张清单', '报省52个重大多跨场景三张清单', '其他重大多跨场景'],
          axisLabel: {
            color: 'black',
            fontSize: 12
          }
        }],
        series: [{
          name: '标准化',
          type: 'bar',
          barWidth: 12, // 柱子宽度
          label: {
            show: true,
            position: 'right', // 位置
            color: '#A7D6F4',
            fontSize: 12,
            distance: 1, // 距离
            formatter: '{c}个' // 这里是数据展示的时候显示的数据
          }, // 柱子上方的数值
          itemStyle: {
            barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              offset: 0,
              color: '#51C5FD'
            }, {
              offset: 1,
              color: '#005BB1'
            }], false) // 渐变
          },
          data: [40, 38, 36]
        }]
      },
      rightConfig1: {
        grid: {
          bottom: '20%',
          top: '5%',
          left: '10%'
        },
        xAxis: {
          type: 'category',
          data: ['申报', '核准', '建设', '完成']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          barWidth: 20

        }]
      },
      rightConfig2: {
        legend: {
          orient: 'vertical',
          left: 'left',
          padding: [0, 0, 40, 0],
          textStyle: { // 图例文字的样式
            color: 'black',
            fontSize: 10
          }

        },
        color: ['#91cc76', '#ef6666', '#5470c6'],
        grid: {
          bottom: '-5%',
          top: '10%',
          left: '-5%'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '65%',
            data: [
              { value: 5, name: '超前5个' },
              { value: 20, name: '正常20个' },
              { value: 5, name: '滞后5个' }

            ],
            label: { // 饼图图形上的文本标签
              normal: {
                show: true,
                position: 'inner', // 标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 12 // 文字的字体大小
                },
                formatter: '{d}%'

              }
            },

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    };
  },
  created() {
    this.tableData.map(o => {
      o.isSc = false;
    });
  },
  methods: {
    sc(row) {
      row.isSc = !row.isSc;
      if (row.isSc) {
        this.$message.success('已收藏');
      } else {
        this.$message.warning('取消收藏');
      }
      this.$forceUpdate();
    }

  }

};
</script>

<style scoped lang='scss'>
    .oneAccountPage{
      padding:10px
    }
    .oneAccountPage_title{
      padding: 5px;
      display: flex;
      height: calc(24vh);

    }
    .oneAccountPage_title_left{
        flex:1;
        background: #fff;
        border-radius: 5px;
        margin-right: 12px;
    }
    .oneAccountPage_title_right{
      flex:1;
      background: #fff;
      border-radius: 5px;
    }
    .oneAccountPage_body{
      margin-top:10px;
      background: #fff;
      border-radius: 10px;
      height: calc(55vh);
    }
    .oneAccountPage_body_search{
      padding:10px 20px;
    }
    .oneAccountPage_body_table{
      padding:0px 20px;
    }
    .oneAccountPage_body_search /deep/ .el-form-item {
      margin-bottom: 10px;
   }

</style>
